<template>
    <div class="Recommend">
        <!-- 装饰 -->
        <div class="decorate">
            <!-- 左盒 -->
            <div class="left">
                <div class="tu"></div>
                <div class="tu tu_c"></div>
                <div class="tu"></div>
            </div>
            <!-- 右盒 -->
            <div class="right">
                <div class="p_box">
                    <div class="p1">HIPPOP Radio</div>
                    <div class="p2">个性好歌推荐</div>
                </div>
                <div class="play"></div>
            </div>
        </div>

        <!-- 推荐专辑 -->
        <div class="recommendedAlbum">
            <!-- 小标题 -->
            <HomeTitle left_text="推荐专辑" right_text="享受听觉盛宴" />

            <!-- 专辑区 -->
            <div class="album_box">
                <!-- 专辑元素 -->
                <div
                    class="album_item"
                    v-for="(item, index) in albumNewestData"
                    :key="index"
                >
                    <!-- 封面 -->
                    <div class="picUrl">
                        <img :src="item.picUrl" alt="" />
                        <!-- 下标 -->
                        <div class="index">{{ index + 1 }}</div>
                    </div>

                    <!-- 专辑名 -->
                    <div class="name">
                        {{ item.name }}
                    </div>
                    <!-- 创建者名字 -->
                    <div class="artistName">{{ item.artistName }}</div>
                </div>
            </div>
        </div>

        <!-- 精选歌单 -->
        <div class="selectedSonglist">
            <!-- 小标题 -->
            <HomeTitle left_text="网友精选歌单" right_text="猜你喜欢" />

            <!-- 歌单区 -->
            <div class="selectedSonglist_box">
                <!-- 歌单元素 -->
                <div
                    class="selectedSonglist_item"
                    v-for="(item, index) in topPlaylistData"
                    :key="index"
                >
                    <!-- 封面盒 -->
                    <div class="cover_box">
                        <!-- 封面大图 -->
                        <div
                            class="coverImgUrl"
                            :style="{
                                backgroundImage:
                                    'url(' + item.coverImgUrl + ')',
                            }"
                            @click="goSongSheet(item.id)"
                        >
                            {{ item.playCount | playCount_kw }}次播放
                        </div>

                        <!-- 装饰特效 -->
                        <div class="bg1"></div>
                        <div class="bg2"></div>
                        <div class="bg3"></div>
                    </div>
                    <div class="l1"></div>
                    <div class="r1"></div>

                    <!-- 歌单名 -->
                    <div class="name">{{ item.name }}</div>
                </div>
            </div>
        </div>

        <!-- 热门话题 -->
        <div class="hotTopic">
            <!-- 小标题 -->
            <HomeTitle left_text="热门话题" right_text="紧跟潮流" />
            <!-- 话题区 -->
            <div class="hotTopic_box">
                <!-- 话题元素 -->
                <div
                    class="hotTopic_item"
                    v-for="(item, index) in hotTopicData"
                    :key="index"
                    :style="{
                        backgroundImage: `linear-gradient(
                        to right,
                        rgba(255, 255, 255, 0.25),
                        rgba(255, 255, 255, 0.25)),
                        url(${item.picUrl})`,
                    }"
                >
                    #{{ item.tit }}#
                </div>
            </div>
        </div>

        <!-- 热门歌手 -->
        <div class="topArtists">
            <!-- 小标题 -->
            <HomeTitle left_text="TOP ARTISTS" right_text="共30位" />

            <!-- 歌手区 -->
            <div class="topArtists_box">
                <!-- 歌手元素 -->
                <div
                    class="topArtists_item"
                    v-for="(item, index) in topArtists"
                    :key="index"
                >
                    <!-- 封面 -->
                    <div
                        class="picUrl"
                        :style="{
                            backgroundImage: 'url(' + item.picUrl + ')',
                        }"
                    ></div>
                    <!-- 歌手名 -->
                    <div class="name">{{ item.name }}</div>
                    <!-- 别名 -->
                    <div class="alias">{{ item.alias }}</div>
                    <!-- 关注按钮 -->
                    <div class="but" @click="collectionSonger_Fn(index)">
                        <van-button round color="#fab512">
                            <div v-show="!item.tf">
                                <van-icon name="plus" /> 关注
                            </div>
                            <div v-show="item.tf">已关注</div>
                        </van-button>
                    </div>
                </div>
            </div>

            <div
                class="more"
                v-if="topArtistsData.topArtists_reserve.length !== 0"
            >
                <van-button
                    @click="moreSonger"
                    round
                    color="linear-gradient(to right, #db2ef8, #2825c3)"
                    >更多歌手</van-button
                >
            </div>
        </div>
    </div>
</template>

<script>
import HomeTitle from '../../components/HomeTitle.vue';
import { Dialog } from 'vant';
import { Toast } from 'vant';
import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from 'vuex';
const {
    mapState: AccountMapState,
    mapMutations: AccountMapMutations,
    mapGetters: AccountMapGetters,
    mapActions: AccountMapActions
} = createNamespacedHelpers('Account');
export default {
    name: "Recommend",
    components: {
        HomeTitle
    },
    filters: {
        // 千分位
        playCount_kw: (value) => {
            let b = String(value).split("");
            let c = b.length;
            for (let i = c - 3; i > 0; i -= 3) { b.splice(i, 0, ","); }
            return b.join("");
        }
    },
    data() {
        return {
            // 最新专辑数据
            albumNewestData: [
                // {
                //     artistName: '',
                //     name: '',
                //     picUrl: '',
                //     id: null
                // }
            ],
            // 最热歌单数据
            topPlaylistData: [
                // {
                //     id: null,
                //     coverImgUrl: '',
                //     name: ''
                // }
            ],
            // 热门话题
            hotTopicData: [
                {
                    tit: "云村夜话",
                    picUrl: require("../../assets/ht6.png")
                },
                {
                    tit: "世界终结前一天",
                    picUrl: require("../../assets/ht4.png")
                },
                {
                    tit: "丧的时候怎么办",
                    picUrl: require("../../assets/ht3.png")
                },
                {
                    tit: "雾与晨的晚间话题",
                    picUrl: require("../../assets/ht2.png")
                },
                {
                    tit: "12.4国家宪法日",
                    picUrl: require("../../assets/ht5.png")
                },
                {
                    tit: "关于彻夜不眠的事情",
                    picUrl: require("../../assets/ht1.png")
                }
            ],
            // 最热歌手数据
            topArtistsData: {
                topArtists: [
                    // {
                    //     name: '',
                    //     alias: '',
                    //     picUrl: '',
                    //     id: null,
                    //     tf: null
                    // } 
                ],
                topArtists_reserve: [],
            },

            // 会话数据 收藏歌手列表
            songerIds: [],
        }
    },
    computed: {
        ...AccountMapState(['uid']),
        topArtists() {
            this.topArtistsData.topArtists.forEach((element) => {
                let boo = this.songerIds.find((v, i) => {

                    if (element.id == v.userId) {
                        return true
                    } else { return false; }
                });
                // console.log('topArtists ==> 收藏歌手 boo ', boo);

                // 是否已经关注
                if (boo) {
                    element.tf = true;
                } else {
                    element.tf = false;
                }
            });
            return this.topArtistsData.topArtists;
        }
    },
    methods: {
        // 跳转到歌单路由
        goSongSheet(id) {
            this.$router.push({ name: "SongSheet", query: { id, type: 2 } });
        },

        // 更多歌手
        moreSonger() {
            this.topArtistsData.topArtists.push(...this.topArtistsData.topArtists_reserve.splice(0, 6))
        },

        // 关注歌手
        collectionSonger_Fn(index) {
            if (!this.uid) { this.$router.push({ name: 'LogOn' }); return }

            if (this.topArtistsData.topArtists[index].tf) {
                Dialog.confirm({
                    title: '确定取消关注该歌手？',
                })
                    .then(() => {
                        // 删除创建者id
                        this.songerIds = this.songerIds.filter((v, i) => {
                            if (this.topArtistsData.topArtists[index].id == v.userId) {
                                return false
                            } else {
                                return true;
                            }
                        });

                        sessionStorage.setItem(
                            "songerIds",
                            JSON.stringify(this.songerIds)
                        );
                        Toast.success({
                            message: '取消关注\n成功！',
                            forbidClick: true,
                        });
                    })
                    .catch((err) => { console.log(err); });
            }
            else {
                this.songerIds.push({
                    userId: this.topArtistsData.topArtists[index].id,
                });

                sessionStorage.setItem(
                    "songerIds",
                    JSON.stringify(this.songerIds)
                );
                Toast.success({
                    message: '关注成功!',
                    forbidClick: true,
                });
            };
        },

        // 请求最新专辑数据
        getAlbumNewest() {
            this.axios({
                method: "GET",
                url: "/album/newest"
            }).then((result) => {
                // console.log("🚀 ==> getAlbumNewest ==> result", result);
                if (result.data.code === 200) {

                    result.data.albums.forEach((v) => {
                        this.albumNewestData.push({
                            artistName: v.artist.name,
                            name: v.name,
                            picUrl: v.picUrl + '?param=140y140',
                            id: v.id
                        })
                    });

                    // console.log("🚀 ==> getAlbumNewest ==> this.albumNewestData", this.albumNewestData);

                    this.getTopPlaylist();
                }
            }).catch((err) => {
                console.log("🚀 ==> getAlbumNewest ==> err", err);
            });
        },

        // 网友精选歌单
        getTopPlaylist() {
            this.axios({
                method: "GET",
                url: "/top/playlist"
            }).then((result) => {
                // console.log("🚀 ==> getTopPlaylist ==> result", result);
                if (result.data.code === 200) {
                    result.data.playlists.forEach((v) => {
                        if (this.topPlaylistData.length < 8) {
                            this.topPlaylistData.push({
                                id: v.id,
                                coverImgUrl: v.coverImgUrl + '?param=140y140',
                                name: v.name,
                                playCount: v.playCount
                            });
                        } else { return };
                    });
                    // console.log("🚀 ==> sgetTopPlaylist ==> this.topPlaylistData", this.topPlaylistData);

                    this.getTopArtists();
                }
            }).catch((err) => {
                console.log("🚀 ==> getTopPlaylist ==> err", err);
            });
        },

        // 请求热门歌手数据
        getTopArtists() {
            this.axios({
                method: "GET",
                url: "/top/artists",
                params: {
                    offset: 0, limit: 30
                }
            }).then((result) => {
                // console.log("🚀 ==> getTopArtists ==> result", result);
                if (result.data.code === 200) {
                    result.data.artists.forEach((v) => {
                        // 艺术家 别名合体
                        let alias = "";
                        if (v.alias.length > 0) { v.alias.forEach((v) => { alias += v + ' / ' }) }
                        if (v.trans) { alias += v.trans + ' / '; }
                        // 清除末尾 " / "
                        if (alias) { alias = alias.slice(0, -3); }

                        if (this.topArtistsData.topArtists.length < 6) {
                            this.topArtistsData.topArtists.push({
                                name: v.name,
                                alias,
                                picUrl: v.picUrl + '?param=140y140',
                                id: v.id
                            });
                        } else {
                            this.topArtistsData.topArtists_reserve.push({
                                name: v.name,
                                alias,
                                picUrl: v.picUrl + '?param=140y140',
                                id: v.id
                            });
                        }

                    });
                    // console.log("🚀 ==> getTopArtists ==> this.topArtistsData", this.topArtistsData);
                }
            }).catch((err) => {
                console.log("🚀 ==> getTopArtists ==> err", err);
            });
        },

    },
    created() {
        this.getAlbumNewest();
        // this.getTopPlaylist();
        // this.getTopArtists();

        // 获取会话中的 收藏歌手列表
        this.songerIds = sessionStorage.getItem("songerIds");
        if (this.songerIds) {
            this.songerIds = JSON.parse(this.songerIds);
        } else {
            this.songerIds = [];
        }
    },
}
</script>

<style lang="less" scoped>
.Recommend {
    padding-top: 20px;
    padding-bottom: 10px;
    max-height: 525px;
    overflow: scroll;

    // 装饰
    .decorate {
        margin-top: 20px;
        padding: 0 15px;
        display: flex;

        // 左盒
        .left {
            display: flex;
            position: relative;

            &::after {
                content: '';
                position: absolute;
                left: 0;
                right: -12px;
                background-image: linear-gradient(90deg, #a031a7, #311faa);
                filter: blur(2px);
                bottom: -4px;
                z-index: -1;
                height: 5px;
            }

            .tu {
                background-color: #fff;
                width: 70px;
                height: 70px;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;

                &:nth-child(1) {
                    background-image: url('../../assets/ftt1.png');
                }
                &:nth-child(3) {
                    background-image: url('../../assets/ftt3.png');
                    background-position: -8px 0;
                }
            }

            .tu_c {
                width: 80px;
                height: 80px;
                left: 30px;
                bottom: 0;
                background-image: url('../../assets/ftt2.png');
                position: absolute;
            }
        }
        // 右盒
        .right {
            margin: 2px 0;
            background-color: #1e1e1e;
            display: flex;
            align-items: center;
            border-top-right-radius: 35px;
            border-bottom-right-radius: 35px;

            .p_box {
                margin-left: 15px;
                margin-right: 15px;
                .p1 {
                    font-size: 18px;
                    margin-bottom: 8px;
                    opacity: 0.93;
                }
                .p2 {
                    font-size: 15px;
                    text-align: center;
                    opacity: 0.6;
                    letter-spacing: 3px;
                }
            }
            .play {
                margin-right: 15px;
                width: 38px;
                height: 38px;
                border-radius: 50%;
                background-size: cover;
                background-image: url('../../assets/play.png');
            }
        }
    }

    // 推荐专辑
    .recommendedAlbum {
        margin-top: 30px;

        // 专辑区
        .album_box {
            padding-left: 15px;
            display: flex;
            overflow: scroll;
            // 专辑元素
            .album_item {
                min-width: 35%;
                margin-right: 12px;
                padding-top: 2px;

                // 封面
                .picUrl {
                    background-image: url('../../assets/singer.png');
                    background-size: cover;
                    background-position: center center;
                    background-repeat: no-repeat;
                    position: relative;
                    border-radius: 5px;
                    box-shadow: 0px 1px 5px 1px #7d22ee;
                    margin-bottom: 10px;

                    img {
                        border-radius: 5px;
                    }

                    // 下标
                    .index {
                        position: absolute;
                        font-size: 14px;
                        top: 0;
                        left: 0;
                        padding-top: 2px;
                        padding-left: 4px;
                        border-bottom-right-radius: 50%;
                        z-index: 2;

                        &::after {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 22px;
                            height: 22px;
                            border-radius: 0 0 100% 0;
                            background-color: #7d22ee;
                            filter: blur(4px);
                            z-index: -1;
                        }
                    }
                }
                // 专辑名
                .name {
                    margin-bottom: 8px;
                    font-size: 14px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    word-break: break-all;
                }
                // 创建者名字
                .artistName {
                    opacity: 0.75;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    word-break: break-all;
                }

                &:nth-child(1) .picUrl {
                    box-shadow: 0px 1px 5px 1px #fb9513;
                    .index::after {
                        background-color: #f600c1;
                    }
                }
                &:nth-child(2) .picUrl {
                    box-shadow: 0px 1px 5px 1px #f600c1;
                    .index::after {
                        background-color: #005dff;
                    }
                }
                &:nth-child(3) .picUrl {
                    box-shadow: 0px 1px 5px 1px #005dff;
                    .index::after {
                        background-color: #ecdb1f;
                    }
                }
            }
        }
    }

    //精选歌单
    .selectedSonglist {
        margin-top: 60px;

        .title_box {
            margin-bottom: 10px;
        }
        // 歌单
        .selectedSonglist_box {
            display: flex;
            overflow: scroll;
            padding: 20px 0 10px 30px;

            // 歌单元素
            .selectedSonglist_item {
                min-width: 40%;
                margin-right: 40px;
                perspective: 1000px;

                // 封面盒
                .cover_box {
                    border-top-right-radius: 3px;
                    border-bottom-left-radius: 3px;
                    transform-style: preserve-3d;
                    transform: skew(-10deg, 0deg);
                    position: relative;
                    width: 100%;
                    height: 90px;
                    background-color: #fff;

                    // 封面图
                    .coverImgUrl {
                        display: flex;
                        align-items: end;
                        justify-content: end;
                        padding-bottom: 5px;
                        padding-right: 5px;
                        color: rgba(255, 255, 255, 0.555);
                        border-top-right-radius: 3px;
                        border-bottom-left-radius: 3px;
                        width: 100%;
                        height: 100%;
                        position: relative;
                        background-image: url('../../assets/singer.png');
                        background-size: cover;
                        background-repeat: no-repeat;
                        background-position: center center;
                        z-index: 5;
                    }
                    // 装饰
                    .bg1 {
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background-color: #d407fc;
                        z-index: 4;
                        transform: translateX(-6px) translateY(-6px);
                        filter: blur(1.5px);
                    }
                    .bg2 {
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background-color: #04f1f6;
                        border-bottom: 2.5px solid #000;
                        border-right: 1px solid #000;
                        z-index: 4;
                        transform: translateX(8px) translateY(7px);
                        filter: blur(0.8px);
                    }

                    .bg3 {
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background-color: rgb(4, 149, 246);
                        background: conic-gradient(
                            #04f1f6 33%,
                            rgb(4, 149, 246) 36%
                        );
                        opacity: 0.65;
                        transform: translateX(14px) translateY(10px);
                        filter: blur(5px);
                    }
                }
                .l1 {
                    position: absolute;
                    width: 22px;
                    height: 5px;
                    left: -20px;
                    bottom: 65px;
                    opacity: 0.8;
                    filter: blur(1px);
                    background-color: #04f1f6;

                    &::before {
                        content: '';
                        position: absolute;
                        width: 22px;
                        height: 5px;
                        bottom: -12px;
                        right: -5px;
                        background-color: #04f1f6;
                    }

                    &::after {
                        content: '';
                        position: absolute;
                        width: 5px;
                        height: 5px;
                        bottom: -22px;
                        left: 3px;
                        background-color: #04f1f6;
                    }
                }

                .r1 {
                    position: absolute;
                    width: 22px;
                    height: 5px;
                    top: 20px;
                    right: -15px;
                    opacity: 0.8;
                    filter: blur(1px);
                    background-color: #d407fc;

                    &::before {
                        content: '';
                        position: absolute;
                        width: 22px;
                        height: 5px;
                        bottom: -12px;
                        right: -5px;
                        background-color: #d407fc;
                    }

                    &::after {
                        content: '';
                        position: absolute;
                        width: 5px;
                        height: 5px;
                        top: -10px;
                        right: -5px;
                        background-color: #d407fc;
                    }
                }

                // 歌单名
                .name {
                    transform: translateX(-15px);
                    margin-top: 20px;
                    font-size: 14px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    word-break: break-all;
                }
            }
        }
    }

    //热门话题
    .hotTopic {
        margin-top: 40px;

        //话题区
        .hotTopic_box {
            display: flex;
            overflow: scroll;
            padding-left: 15px;
            padding-bottom: 5px;
            padding-top: 2px;

            // 话题元素
            .hotTopic_item {
                display: flex;
                align-items: center;
                justify-content: center;
                background-position: center center;
                background-size: cover;
                background-repeat: no-repeat;
                height: 50px;
                min-width: 40%;
                margin-right: 10px;
                border-radius: 5px;
                font-size: 13px;

                &:nth-child(1) {
                    box-shadow: 0px 1px 5px 1px #97d3e8;
                }
                &:nth-child(2) {
                    box-shadow: 0px 1px 5px 1px #b864b8;
                }
                &:nth-child(3) {
                    box-shadow: 0px 1px 5px 1px #e39e83;
                }
                &:nth-child(4) {
                    box-shadow: 0px 1px 5px 1px #a5796e;
                }
                &:nth-child(5) {
                    box-shadow: 0px 1px 5px 1px #4bbefb;
                }
                &:nth-child(6) {
                    box-shadow: 0px 1px 5px 1px #7d22ee;
                }
            }
        }
    }

    //热门歌手
    .topArtists {
        margin-top: 50px;
        padding-bottom: 20px;

        // 歌手区
        .topArtists_box {
            padding: 0 15px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            // 歌手元素
            .topArtists_item {
                width: 31%;
                display: flex;
                flex-flow: column;
                align-items: center;
                background-color: #1e1e1e;
                margin-bottom: 12px;
                border-radius: 5px;
                padding-bottom: 10px;
                padding-top: 12px;

                //   封面
                .picUrl {
                    width: 52px;
                    height: 52px;
                    border-radius: 50%;
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center center;
                }
                // 歌手名
                .name {
                    max-width: 90%;
                    margin-top: 5px;
                    margin-bottom: 6px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    word-break: break-all;
                }
                // 别名
                .alias {
                    max-width: 90%;
                    opacity: 0.5;
                    margin-bottom: 7px;
                    height: 12px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    word-break: break-all;
                }
                // 关注按钮
                .but {
                    button {
                        height: 23px;
                        padding: 0 10px;

                        span {
                            font-size: 12px !important;
                        }
                    }
                }
            }
        }

        .more {
            width: 40%;
            margin: 0 auto;
            margin-top: 20px;

            button {
                width: 100%;
                height: 34px;
                padding: 0;
                letter-spacing: 5px;
            }
        }
    }
}
</style>